<script lang="ts" setup>
import PageDialog from "@/components/PageDialog/index.vue";
import {ref} from "vue";
import {ProjectObj} from "@/api/demoClass";
import {addProject, editProject, ownerList} from "@/api/demoApi";
import {message} from "@/utils/message";

defineOptions({
  name: "projectDialog"
});

/**-------------------表单相关-------------------**/
//表单参数
const formData = ref({
  id: null,
  projectNo: null,
  projectName: null,
  ownerId: null,
  ownerName: null
})

//表单校验
const formRules = ref({
  projectNo: [{required:true,message:'请输入项目编号',trigger:['blur','change']}],
  projectName: [{required:true,message:'请输入项目名称',trigger:['blur','change']}],
})

//业主选项
const ownerOptions = ref([])
const getOwnerOptions = ()=>{
  ownerOptions.value = ownerList().map(item=>({value:item.id,label:item.ownerName}))
}

/**-------------------打开弹框-------------------**/
//标题
const dialogTitle = ref('')
const dialog = ref()
//弹框显示
const dialogShow = (title: string,data?: object)=>{
  dialogTitle.value = title
  getOwnerOptions()
  if(data) {
    formData.value = {...data}
  }
  dialog.value.dialogVisible = true
}
defineExpose({
  dialogShow
})

/**-------------------事件回调-------------------**/
//选择业主
  const selectOwner = (id) =>{
    if(!id) formData.value.ownerName = null
    else formData.value.ownerName = (ownerOptions.value.filter(item=>item.value === id)[0].label) ?? null
}
//取消
const form = ref()
const handlerCancel = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.resetFields()
    formData.value = {
      id: null,
      projectNo: null,
      projectName: null,
      ownerId: null,
      ownerName: null
    }
    dialog.value.dialogVisible = false
    resolve({})
  }catch(e){
    console.log(e)
    reject(e)
  }
})
//确认
const emits = defineEmits(['done'])
const handlerConfirm = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.validate()
    //todo 新增、编辑接口
    if(!formData.value.id) {
      const newProject = new ProjectObj(formData.value)
      addProject(newProject)
      message("添加成功", { type: "success" });
    }else {
      editProject(formData.value)
      message("编辑成功", { type: "success" });
    }
    await handlerCancel()
    emits('done')
    resolve({})
  }catch(e){
    reject(e)
  }
})
</script>

<template>
  <PageDialog ref="dialog" :handler-cancel="handlerCancel" :handler-confirm="handlerConfirm" :title="dialogTitle">
    <el-form ref="form" :model="formData" :rules="formRules" label-position="top" label-width="auto">
      <el-form-item label="项目编号" prop="projectNo">
        <el-input v-model="formData.projectNo" :disabled="dialogTitle === '业主绑定'" clearable placeholder="请输入项目编号" />
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="formData.projectName" :disabled="dialogTitle === '业主绑定'" clearable placeholder="请输入项目名称" />
      </el-form-item>
      <el-form-item v-if="dialogTitle === '业主绑定'" label="所属业主" prop="ownerId">
        <el-select v-model="formData.ownerId" clearable filterable placeholder="请选择所属业主" @change="selectOwner" @clear="selectOwner">
          <el-option v-for="(item,index) in ownerOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
  </PageDialog>
</template>

<style lang="scss" scoped>
//:deep(.el-form) {
//  display: flex;
//  justify-content: space-between;
//  align-items: center;
//  flex-wrap: wrap;
//
//  .el-form-item {
//    width: 48%;
//
//    .el-input,
//    .el-select {
//      width: 100%;
//    }
//  }
//}
</style>
